<template>
  <div>
    <!-- 查询功能 -->
    <div style="margin-bottom: 5px">
      <!-- 输入用户名查询 -->
      <el-input
          v-model="searchForName"
          @keyup.enter.native="fetchUsers"
          placeholder="请输入用户名"
          suffix-icon="el-icon-search"
          style="width: 200px"
      ></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="fetchUsers">名称查询</el-button>
      <!-- 输入用户ID查询 -->
      <!-- <el-input
          v-model="id"
          @keyup.enter.native="fetchUsersById"
          placeholder="请输入用户ID"
          suffix-icon="el-icon-search"
          style="width: 200px; margin-left: 5px"
      ></el-input> -->
      <!-- 查询按钮 -->
      <!-- <el-button type="primary" style="margin-left: 5px" @click="fetchUsersById">用户ID查询</el-button> -->
      <el-popover
  placement="right"
  width="400">
  <el-table :data="selectedUser">
    <el-table-column width="150" property="avatar" label="头像"></el-table-column>
    <el-table-column width="100" property="nickname" label="姓名"></el-table-column>
    <el-table-column width="300" property="isJoin" label="地址"></el-table-column>
  </el-table>
  <el-button type="primary" style="margin-left: 5px" >用户详情</el-button>
</el-popover>
      <!-- 重置按钮 -->
      <el-button type="success" @click="resetParam">重置</el-button>
      <!-- 新增按钮 -->
      <!-- <el-button type="primary" style="margin-left: 5px" @click="addUser">新增</el-button> -->
    </div>

    <!-- 列表展示 -->
    <el-table
        :data="users"
        :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
    >
      <el-table-column prop="id" label="用户ID" width="180"> </el-table-column>
      <el-table-column prop="nickname" label="用户名" width="160"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="100">
        <template slot-scope="scope">
          {{ scope.row.gender === 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机" width="180"> </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180"> </el-table-column>
      <el-table-column prop="isDisabled" label="是否禁用" width="100">
        <template v-slot:default="{ row }">
        <el-switch
          v-model="row.isDisabled"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="toggleDisable(row)"
        >
        </el-switch>
      </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="small" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
          <!-- <el-button size="small" @click="getUserInfo(scope.row.id)">查看详情</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; text-align: center">
      <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
      ></el-pagination>
     </div>

    </div>
    <!-- 用户详情 -->
    

  </div>
</template>

<script>
import { deleteUser } from '@/api/userServe/deleteUser'
import { getUserInfoById } from '@/api/userServe/getUserInfoById'
import { queryUsers } from '@/api/userServe/queryUsers'
import { toggleUserStatus } from '@/api/userServe/toggleUserStatus'

export default {
  data() {
    return {
      users: [], // 用户数据
      page: 1, // 当前页数
      limit: 10, // 每页显示的数量
      totalPage: 1, // 总页数
      selectedUser: {}, // 选中的用户详情
      searchForName: '', // 查询用户名
      id: '' // 查询用户ID
    };
  },
  methods: {
    fetchUsers() {
      queryUsers(this.page, this.limit, {nickname: this.searchForName})
          .then(response => {
            console.log('获取的用户数据:', response); // 调试信息
            if (response.code === 20000) {
             /* const records = response.data.data.records || [];
              console.log('解析后的用户数据:', records); // 进一步调试信息
              this.users = records;*/
              this.users = response.data.list.records;
              this.totalPage = response.data.list.total;
              console.log(this.users)
              this.totalPage = Math.ceil((response.data.data.total || 1) / this.limit);
            } else {
              console.error('获取用户数据失败:', response.data ? response.data.message : '无响应数据');
            }
          })
          .catch(error => {
            console.error('获取用户数据失败:', error);
          });
    },
    deleteUser(id) {
      if (confirm('确定要删除此用户吗？')) {
        deleteUser(id)
            .then(response => {
              if (response.code === 20000) {
                alert('删除成功');
                this.fetchUsers(); // 重新获取用户列表
              } else {
                alert('删除失败');
              }
            })
            .catch(error => {
              console.error('删除用户失败:', error);
              alert('删除失败');
            });
      }
    },
    getUserInfo(id) {
      getUserInfoById(id)
          .then(response => {
            if (response.code === 20000) {
              console.log(response);
              
              this.selectedUser = response.data.user;
            } else {
              console.error('获取用户详情失败:', response.data ? response.data.message : '无响应数据');
            }
          })
          .catch(error => {
            console.error('获取用户详情失败:', error);
          });
    },
    toggleDisable(row) {  
        toggleUserStatus(row.id)
            .then(response => {
              if (response.code === 20000) {
                this.$message({
            message: "禁用状态修改成功",
            type: "success",
          });
              } else {
                this.$message({
            message: "禁用状态修改失败",
            type: "error",
          });
              }
            });
    },
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.page = 1;  // Reset to first page with new page size
      this.fetchUsers();
    },
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.fetchUsers();
    },
    resetParam() {
      this.searchForName = '';
      this.id = '';
      this.fetchUsers();
    },
    addUser() {
      // 处理新增用户逻辑
    }
  },
  created() {
    this.fetchUsers();
  },
  mounted(){
 
  }
};
</script>

<style scoped>
.pagination-wrapper {
  position: absolute; /* 使用绝对定位 */
  left: 50%;  /* 水平居中 */
  bottom: 0;  /* 位于容器底部 */
  transform: translateX(-50%); /* 水平居中校正 */
  width: auto; /* 根据内容调整宽度 */
  padding: 10px 20px;
  display: flex;
  justify-content: center; /* 内部元素水平居中 */
  align-items: center;
}
/* .pagination-container {
  min-height: 100vh;
  position: relative; 
} */
</style>
